
import { View } from "@tarojs/components";
import { HotSearchProps } from "../../../models";
import "../hot.scss";

interface HotSearchBarProps{
  onSelect?:(value:string)=>void;
}

const mockHotWords:HotSearchProps[] = [
  {
    id:1,
    label:"鲜虾粥",
    value:"xianxiazhou"
  },
  {
    id:2,
    label:"酸菜鱼",
    value:"suancaiyu"
  },
  {
    id:3,
    label:"红烧茄子",
    value:"hongshaoqiezi"
  },
  {
    id:4,
    label:"啤酒鸭",
    value:"pijiuya"
  },
  {
    id:5,
    label:"清蒸鲈鱼",
    value:"qingzhengluyu"
  },
  {
    id:6,
    label:"香菇滑鸡",
    value:"xiangguhuaji"
  }
]

export const HotSearchBar = ({
  onSelect
}:HotSearchBarProps) => {

  const handleOnClick = (value:string) => {
      onSelect?.(value)
  }

  return(
    <>
      <View className="hot-search-bar">
        <View className="search-bar-title">热门搜索：</View>
        <View className="hot-list">
          {
            mockHotWords.map((item=>(
              <View
                key={item.id}
                onClick={()=>handleOnClick(item.label)}
                className="hot-list--item">
                {item.label}
              </View>
            )))
          }
        </View>
      </View>
    </>
  )
}
